<template>
    <div>
    </div>
    <div class="box">
        <header class="header">
            <van-nav-bar title="购物车" left-text="" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="main">
            <van-swipe-cell v-for="item in store.cartList" :key="item.id">
                <van-card :num="item.count" :price="item.price" :title="item.title" class="goods-card"
                    :thumb="item.image" >
                    <template #tag>
                        <van-checkbox v-model="item.checked"></van-checkbox>
                    </template>
                    <template #footer>
                        <van-stepper v-model="item.count" />
                    </template>
                </van-card>
                <template #right>
                    <van-button style="height: 100px;" square text="删除" type="danger" class="delete-button" @click="store.deleteCart(item.id)"/>
                </template>
            </van-swipe-cell>
        </main>
    </div>
    <footer class="footer">
        <van-submit-bar :price="store.zongPrice * 100" button-text="提交订单" @submit="onSubmit" >
            <van-checkbox v-model="addChecked">全选</van-checkbox>
        </van-submit-bar>
    </footer>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed } from 'vue';
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()

const addChecked = computed({
    get(){
        if(store.cartList.length==0){
            return false
        }else{
            return store.cartList.every(item => item.checked)
        }
    },
    set(newVal){
        store.cartList.forEach(item => item.checked =newVal)
    }
})
</script>

<style lang="scss" scoped></style>